<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 第一行 -->
      <el-row type="flex" justify="space-between">
        <el-col><span class="pink">说明：目前支持学科和关键字条件筛选</span></el-col>
        <el-col class="right"
          ><el-button type="success" class="btn1" @click="$router.push('/questions/new')"><i class="el-icon-edit" ></i> 新增试题</el-button></el-col
        >
      </el-row>
      <!-- 表单 -->
      <el-form label-width="80px" :model="query">
        <!-- 第一行 -->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="学科" label-width="80px">
              <el-select placeholder="请选择" v-model="query.subjectID" @change="subChange">
                <el-option
                  v-for="item in subjectIDList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" label-width="80px">
              <el-select placeholder="请选择" v-model="query.catalogID">
                <el-option
                  v-for="item in catalogID"
                  :key="item.label"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" label-width="80px">
              <el-select placeholder="请选择" v-model="query.tags">
                <el-option
                  v-for="item in tags"
                  :key="item.id"
                  :value="item.creatorID"
                  :label="item.tagName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字" label-width="80px">
              <el-input placeholder="根据题干搜素" v-model="query.keyword"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select placeholder="请选择" v-model="query.questionType">
                <el-option
                  v-for="item in questionType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select placeholder="请选择" v-model="query.difficulty">
                <el-option
                  v-for="item in difficulty"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select placeholder="请选择" v-model="query.direction">
                <el-option v-for="(item, index) in direction" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select placeholder="请选择" v-model="query.creator">
                <el-option v-for="item in creator" :key="item.id" :label="item.username" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第三行 -->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="query.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="query.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select v-model="query.province" placeholder="请选择" style="width: 48%" @change="changePrvice">
                <el-option v-for="(item, index) in provinces" :key="index" :label="item" :value="item"> </el-option>
              </el-select>
              <el-select placeholder="请选择" style="width: 48%; margin-left: 4%" v-model="query.city">
                <el-option v-for="(item, index) in citys" :key="index" :label="item" :value="item"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="text-align: right">
              <el-button size="small" @click="remove">清除</el-button>
              <el-button type="primary" size="small" @click="search">搜素</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- alert -->
      <el-alert :title="'数据一共' + total + '条'" type="info" show-icon> </el-alert>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="260px"> </el-table-column>
        <el-table-column prop="subject" label="学科"> </el-table-column>
        <el-table-column prop="catalog" label="目录"> </el-table-column>
        <el-table-column label="题型" :formatter="questionFn"> </el-table-column>
        <el-table-column prop="question" label="题干" width="260px">
          <template #default="{ row }">
            <div v-html="row.question"></div>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" width="300px">
          <template #default="{ row }">
            {{ FormData(row.addDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" :formatter="difficultFn"> </el-table-column>
        <el-table-column prop="creator" label="录入人"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="200px">
          <template #default="{row}">
            <el-button type="primary" icon="el-icon-view" circle plain @click.native="review(row.id)"></el-button>
            <el-button
              type="success"
              icon="el-icon-edit"
              circle
              plain
              @click="jump(row.id)"
            ></el-button>
            <el-button type="danger" icon="el-icon-delete" circle plain @click="del(row.id)"></el-button>
            <el-button type="warning" icon="el-icon-check" circle plain @click="add(row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        layout="prev, pager, next,total,sizes,jumper"
        :total="total"
        align="right"
        :page="query.page"
        :page-size="query.pagesize"
        :page-sizes="[2, 3, 5, 10]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
      <!-- 预览弹框 -->
      <el-dialog title="题目预览" :visible.sync="dialogVisible">
        <el-descriptions class="margin-top" :column="4">
          <el-descriptions-item label="【题型】">{{
            preview.questionType === '1' ? '单选题' : '多选题'
          }}</el-descriptions-item>
          <el-descriptions-item label="【编号】">{{ preview.id }}</el-descriptions-item>
          <el-descriptions-item label="【难度】">{{
            preview.difficulty === '1' ? '简单' : '困难'
          }}</el-descriptions-item>
          <el-descriptions-item label="【标签】">{{ preview.tags }}</el-descriptions-item>
          <el-descriptions-item label="【学科】">{{ preview.subjectName }}</el-descriptions-item>
          <el-descriptions-item label="【目录】">{{ preview.directoryName }}</el-descriptions-item>
          <el-descriptions-item label="【方向】">{{ preview.direction }}</el-descriptions-item>
        </el-descriptions>
        <hr />
        <div>
          <p>【题干】:</p>
          <a href="#" style="color: blue" v-html="preview.question"></a>
          <div v-if="preview.questionType === '1'">
            <p>{{ preview.questionType === '1' ? '单选题' : '多选题' }}选项:(一下选中的选项为正确答案)</p>
            <p v-for="item in list" :key="item.id" disabled>
              <el-radio v-model="radio[0].isRight" :label="item.isRight" onclick="return false">{{ item.title }}</el-radio>
            </p>
          </div>
          <div v-if="preview.questionType === '2'">
            <p>{{ preview.questionType === '1' ? '单选题' : '多选题' }}选项:(一下选中的选项为正确答案)</p>
            <el-checkbox-group  v-model="checkbox">
              <el-checkbox v-for="item in list" :label="item.id" :key="item.id" onclick="return false"git>{{ item.title }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <hr>
        <div>【参考答案】： <el-button type="danger" @click="show=!show">视频答案预览</el-button>
        <div v-show="show">
                <video :src="preview.videoURL" controls></video>
        </div>
        </div>
        <hr>
        <div>【答案解析】：<span v-html="preview.answer"></span></div>
        <hr>
        <p>【题目备注】：{{preview.remarks}}</p>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" class="btn">关闭</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list, remove, detail as detailqusetion, choiceAdd } from '@/api/hmmm/questions.js'
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
import { simple } from '@/api/base/users.js'
import { list as tagList } from '@/api/hmmm/tags.js'
import { simple as subsimple } from '@/api/hmmm/subjects.js'
import { simple as dirsimple } from '@/api/hmmm/directorys.js'
import { provinces, citys } from '@/api/hmmm/citys.js'

import dayjs from 'dayjs'
export default {
  name: 'question',
  data () {
    return {
      tableData: [], // 表格所需数据
      query: {
        page: 1,
        pagesize: Number(5),
        direction: null, // 方向
        questionType: null, // 题型
        difficulty: null, // 难度
        city: null, // 企业所在城市
        creator: null, // 录入人
        tags: null, // 标签
        subjectID: null, // 学科
        catalogID: null, // 目录
        keyword: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        province: null // 所在省
      },
      total: 5,
      direction: direction, // 方向
      difficulty: difficulty, // 难度
      questionType: questionType, // 试题类型
      creator: [],
      tags: [],
      subjectIDList: [],
      catalogID: [],
      provinces: [],
      citys: [],
      dialogVisible: false, // 弹框
      preview: {}, // 预览
      list: [],
      radio: [], // 单选
      checkbox: [], // 多选
      show: false

    }
  },
  methods: {
    // 获取列表
    async getData () {
      const { data: res } = await list(this.query)
      this.tableData = res.items
      this.total = res.counts
    },
    // 获取用户简单列表
    async simpleFn () {
      const { data: res } = await simple()
      this.creator = res
    },
    // 获取标签列表
    async tagListFn () {
      const { data: res } = await tagList()
      // console.log(res)
      this.tags = res.items
    },
    // 获取学科简单列表
    async subsimpleFn () {
      const { data: res } = await subsimple()
      // console.log(res)
      this.subjectIDList = res
    },
    // 获取省
    async province () {
      this.provinces = provinces()
      // console.log(this.provinces)
    },
    // 题型
    questionFn (row) {
      const question = {
        questionType
      }
      const obj = question.questionType.find(item => item.value === row.questionType * 1)
      return obj ? obj.label : '未知'
    },
    // 难度
    difficultFn (row) {
      const difficult = {
        difficulty
      }
      const obj = difficult.difficulty.find(item => item.value === row.difficulty * 1)
      return obj ? obj.label : '未知'
    },
    // 时间
    FormData (value) {
      return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
    },
    // 每页条数
    handleSizeChange (val) {
      this.query.pagesize = val
      this.getData()
    },
    // 页码
    handleCurrentChange (val) {
      this.query.page = val
      this.getData()
    },
    // 学科二级列表
    async subChange (val) {
      if (this.query.subjectID) {
        const { data: res } = await dirsimple({ subjectID: val })

        this.catalogID = res // 这是二级目录列表赋值
      }
    },
    // 省份二级联动
    changePrvice (val) {
      if (this.query.province) {
        this.citys = citys(val)
      }
    },
    // 搜索
    search () {
      this.getData()
    },
    // 清除
    remove () {
      this.query = {}
      this.getData()
    },
    // 删除
    del (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ id: id })
        this.$message.success('删除成功')
        //  优化
        if (this.tableData.length === 1) {
          this.query.page--
          if (this.query.page <= 0) {
            this.query.page = 1
          }
        }
        this.getData()
      })
    },
    // 预览
    async review (id) {
      this.dialogVisible = true
      const { data: res } = await detailqusetion({ id: id })
      this.preview = res

      this.list = res.options

      this.radio = this.list.filter(item => item.isRight === 1)

      this.checkbox = this.radio.map(item => item.id)
    },
    // 加入精选
    add (id) {
      console.log('row', id)
      this.$confirm('此操作将加入精选题库, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(async () => {
        this.$message({
          type: 'success',
          message: '加入成功!'
        })
        await choiceAdd({ id: id, choiceState: 1 })
        this.getData()
        this.$router.push({ path: '/questions/choice' })
      })
    },
    jump (id) {
      this.$router.push({
        path: '/questions/new',
        query: {
          id: id
        }
      })
    }

  },
  mounted () {
    this.getData() // 获取表格数据
    this.simpleFn()
    this.tagListFn()
    this.subsimpleFn()
    this.province()
  }
}
</script>

<style scoped lang="scss">
.el-row {
  margin-bottom: 10px;
}

.pink {
  color: pink;
  line-height: auto;
  font-size: 12px;
}
.right {
  text-align: right;
}
.el-form-item .el-select {
  width: 100%;
}
::v-deep .call {
  color: #909399;
  background-color: #fafafa;
}

.btn {
  // color: red;
  position: absolute;
  right: 10px;
  bottom: 10px;
}
</style>
